<template>
  <div class="ilnechartbox">
    <div class="titlename">会员增长趋势</div>
    <div class="catrs">
    <div ref="linechart" style="height: 100%; width:100%;"></div> 
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/dist/echarts";
// 引入新的exharts
import "echarts/dist/echarts.min.js";
// 引入vuex数据管理集
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      // trendNumber:[5,12,0,20,15,60]
    };
  },
  mounted() {
    this.getCommertrend();
    setTimeout(() => {
      this.linechart();
    }, 1000);
  },
  computed: {
     ...mapState({
       trendNumber: (state) => state.bigscreen.trendNumber,
     }),
    ...mapState({
      Months: (state) => state.bigscreen.Months,
    }),
  },
  methods: {
    getCommertrend() {
      this.$store.dispatch("bigscreen/getMemenrtrend");
    },
    linechart() {
      // 初始化echarts
      let myecharts = echarts.init(this.$refs.linechart);
      //  添加配置项
      let option = {
        xAxis: {
          type: "category",
          data: this.Months,
        },
        backgroundColor: "#0a2145",
        yAxis: {
          min:0,
          max:5,
          type: "value",
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: this.trendNumber,
            type: "line",
            smooth: true,
          },
        ],
      };
      myecharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>

$font-color: #09f5fc;
.ilnechartbox {
  // // height: 100%;
  // width: 100%;
  // background-color: pink;
  height: 100%;
  padding: 5px ;
  .titlename {
    // background-color: red;
   height: 50px;
    color: $font-color;
    padding: 10px 10px;
  }
  .catrs {
    //  background-color: skyblue;
     height:calc(100% - 50px);
    // height: 350px;
    // width: 515px;
    }
}
</style>
